<template>
  <div class="gameResult">
    <img class="scoreImg" src="static/imgs/gameResult/score.png"/>
    <div class="scoreBorder">
      <div class="score"><span>{{result}}分</span></div>
      <img class="borderImg" src="static/imgs/gameResult/qrBorder.png"/>
      <img class="qrcodeImg" :src="qrSrc"/>
    </div>
  </div>
</template>

<script>
import { getWeixinQrCode } from '../axios/api/gameResult_api'
export default {
  name: 'gameResult',
  data () {
    return {
      templateId: '',
      result: 10000,
      qrSrc: '',
      activityId: ''
    }
  },
  created () {
    this.result = this.$route.query.score || 0
    this.activityId = this.$route.query.activityId
    this.getQrImg()
  },
  methods: {
    async getQrImg () {
      let data = await getWeixinQrCode({activityId: this.activityId})
      this.qrSrc = data.request.responseURL
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.gameResult{
  position: relative;
}
.gameResult .scoreImg{
  width: 100%;
  height: 100%;
}
.scoreBorder{
  position: absolute;
  top: 25%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.score{
  width: 100%;
  font-size: 4.2rem;
  color: #fff;
}
.score span{
  display: block;
  margin: 0 auto;
}
.borderImg{
  width:50%;
  margin-top: 2rem;
  align-self: center;
}
.qrcodeImg{
  width:46%;
  transform: translateY(-104%);
  align-self: center;
}
</style>
